<template>
  <view class="boxContent" style="position: relative">
    <!-- line设置下划线， textSize文本 
    :defaultIndex="current1" 选项卡的默认选中索引为 current1，它是一个动态绑定的值
    :tabList="tablistTop" 设置了选项卡的列表数据为 tablistTop，它是一个动态绑定的值-->
    <tab :lineWidth="100" :line-height="4" :textSize="'30rpx'" :tab-type="'underLine'" :underLineColor="'#488AFD'"
      :textColor="'#488AFD'" color="#488AFD" :tabStyle="'justify-content: space-around;background: #fff;'"
      :defaultIndex="current1" :tabList="tablistTop" @click="tabClick1"></tab>
    <view class="img-box">
      <image style="width: 100%; height: 400rpx; margin-top: 10rpx" :src="require('../images/reportListbj.png')"
        class="search-icon" />
    </view>
    <view class="tab-main" style="position: absolute; left: 0; top: 120rpx; width: 100%">
      <!-- <uni-search-bar> 组件的使用。这个组件通常用于实现搜索功能 
      v-model="searchValue" 实现了双向数据绑定，用户在输入框中输入的内容会实时更新 searchValue，反之亦然。-->
      <uni-search-bar radius="20" :maxlength="30" v-model="searchValue" placeholder="请输入关键字搜索" cancelButton="none"
        @input="handleSearch"></uni-search-bar>
    </view>
    <view class="list-main" style="padding-bottom: 20rpx; position: absolute; left: 0; top: 180rpx">
      <view style="width: 80%">
        <tab :lineWidth="40" :line-height="8" :textSize="'30rpx'" :tab-type="'underLine'" :underLineColor="'#488AFD'"
          :textColor="'#111111'" color="#488AFD" :tabStyle="'justify-content: space-around;background: transparent;'"
          :defaultIndex="current" :tabList="tablist" @click="tabClick"></tab>
      </view>
      <view style="margin-top: 30rpx">
        <!-- 列表通过 v-for 指令遍历 reportList 数组，并根据每个项目的状态 (queryStatus) 显示不同的内容和样式。 
        使用 idx 作为唯一的键 (:key="idx") -->
        <view v-for="(item, idx) in reportList" :key="idx">
          <view style="text-align: center; margin-top: 10rpx">
            <!-- 使用了 filterTime 过滤器格式化 item.createTime -->
            <view class="timeStyle">{{ item.createTime | filterTime }}</view>
          </view>
          <view class="list-item">
            <!-- 查询中 -->
            <view style="position: relative;" @click="detail(item)" v-if="item.queryStatus == 100" class="ing-task">
              <view>
                <view style="font-weight: 500; color: #222222; margin-bottom: 5rpx">{{ item.taxpayerName ?
                  item.taxpayerName : "-" }}</view>
                <view style="color: #999; margin-top: 5rpx">{{
                  item.createTime
                  }}</view>
              </view>
              <view style="color: #488afd"> 查询中... </view>
              <view style="position: absolute; top: 0; right: 0;" v-if="item.channel == 'scancode'">
                <image style="width: 170rpx;height: 150rpx;" :src="require('../images/other-searchbg.png')"
                  mode="scaleToFill" />
              </view>
            </view>
            <!-- 查询成功 -->
            <view v-if="item.queryStatus == 200" style="position: relative;" @click="detail(item)" class="success-task">
              <view class="success-task-top">
                <view class="task-msg">
                  <view style="font-weight: 500; color: #222222">公司名称：</view>
                  <view style="font-weight: 500; color: #222222">{{
                    item.taxpayerName
                    }}</view>
                </view>
                <view class="task-msg">
                  <view>法人姓名：</view>
                  <view>{{ item.legalPerson }}</view>
                </view>
                <view class="task-msg">
                  <view>注册地址：</view>
                  <view>{{ item.registerAddress }}</view>
                </view>

                <view class="line"></view>
              </view>
              <view class="success-task-bottom">
                <view class="task-msg">
                  <view class="task-msg-title">
                    状态：{{ item.visibleType | statusFilter }}
                  </view>
                  <view @click.stop="personDetail(item)" class="task-msg-content" v-if="item.visitCount > 0">
                    <text>{{ item.visitCount }}</text>
                    <text> 人查看</text>
                  </view>
                </view>
                <view class="task-msg-status">已完成</view>
              </view>
              <view style="position: absolute; top: 0; right: 0;" v-if="item.channel == 'scancode'">
                <image style="width: 170rpx;height: 150rpx;" :src="require('../images/other-searchbg.png')"
                  mode="scaleToFill" />
              </view>
            </view>
            <!-- 查询失败 -->
            <view v-if="item.queryStatus == 300" style="position: relative;">
              <view class="ing-fail">
                <view @click="failPop(item)">
                  <view style="
                      font-weight: 500;
                      color: #222222;
                      margin-bottom: 5rpx;
                    ">{{ item.taxpayerName }}</view>
                  <view class="row" style="margin-top: 10rpx; width: 370rpx">
                    <text style="color: #f0822f; font-size: 30rpx">未知状态</text>
                    <view>
                      <text style="color: #999999; font-size: 24rpx">具体原因请</text>
                      <text style="color: #488afd; font-size: 24rpx">联系客服</text>
                    </view>
                  </view>
                </view>
                <view style="display: flex; align-items: center">
                  <button class="resetSearch" @click="addSearch(item)" v-if="item.channel != 'scancode'">
                    重新查询
                  </button>
                </view>
              </view>
              <view class="tipStyle">温馨提示：我们会持续请求数据，请30分钟后再查看</view>
              <view style="position: absolute; top: 0; right: 0;" v-if="item.channel == 'scancode'">
                <image style="width: 170rpx;height: 150rpx;" :src="require('../images/other-searchbg.png')"
                  mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="reportList.length == 0 && !loading">
      <empty></empty>
    </view>
    <loading :show="loading"></loading>
    <!-- 自定义组件：处理手机号授权
    @onLoadFun="onLoadFun"事件绑定 当组件加载时会触发 onLoadFun 方法
    :isShowAuth="isShowAuth" isShowAuth 变量通常在 Vue 组件的 data 或 computed 属性中定义，用于控制是否显示授权界面。
    @authColse="authColse" 事件绑定了组件的 authColse 事件，当授权界面关闭时会触发 authColse 方法，-->
    <authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    <!-- 弹窗组件 -->
    <uni-popup ref="popup" :maskClick="false">
      <view class="popup-content">
        <view style="width: 288rpx; height: 288rpx">
          <image src="/pagesWater/static/wechatGui.jpg" style="width: 100%; height: 100%"></image>
        </view>
        <view style="font-size: 26rpx; color: #555555; margin-top: 30rpx">
          长按识别二维码联系客服，点击
          <text style="color: #488afd" @click="goto">人工客服</text>
        </view>
        <view style="font-size: 26rpx; margin-top: 10rpx; color: #555555">
          将竭诚为您解答哦～
        </view>
        <view class="popIKnow" @click="closeDialog">我知道了</view>
        <view @click="closeDialog" style="
            width: 36rpx;
            height: 36rpx;
            position: absolute;
            right: 26rpx;
            top: 20rpx;
          ">
          <image src="/pagesWater/static/close.png" style="width: 100%; height: 100%"></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { getReportListApi } from "@/api/user";
import Routine from "@/libs/routine";
import { mapGetters } from "vuex";
import share from "@/utils/share";
import Tab from "../../components/tab/tab.vue";
import Authorize from "@/components/Authorize.vue";
import residenceTime from "@/mixins/residenceTime";
export default {
  components: { Authorize },
  mixins: [residenceTime],
  computed: mapGetters(["isLogin"]),
  data() {
    return {
      tablist: ["全部", "查询中", "已完成", "查询失败"],
      tablistTop: ["全部报告", "我的历史", "他人查询"],
      taskInfo: {},
      taskList: [],
      current: 0,
      current1: 0,

      tabFlag: false,
      loading: false,
      isShowAuth: false,
      list: [],
      numArr: {
        0: "",
        1: 100,
        2: 200,
        3: 300,
      },
      where: {
        pageNum: 1,
        pageSize: 10,
        likeName: "",
        queryStatus: "",
        queryType: 0,
      },
      total: 0,
      reportList: [],
      searchValue: "",
      errInfo: {
        title: ''
      }
    };
  },
  filters: {
    filterTime(val) {
      const [dateStr, timeStr] = val.split(" ");
      if (!dateStr || !timeStr) return val; // 格式校验

      const [y, m, d] = dateStr.split("-");
      const currentYear = new Date().getFullYear();
      const timePart = timeStr.slice(0, 5); // 始终取 HH:mm
      return currentYear == y
        ? `${parseInt(m)}月${parseInt(d)}日 ${timePart}`
        : `${y}年${parseInt(m)}月${parseInt(d)}日 ${timePart}`;
    },
    statusFilter(type) {
      const statusMap = {
        0: "全公开",
        1: "部分公开",
        2: "私密",
        3: "指定访问"
      };
      return statusMap[type];
    }
  },
  async onShow() {
    // this.current = 0;
    if (this.isLogin) {
      // this.list.reset()
      this.taskList = [];
      // this.initLeftMenu();
    } else {
      // #ifdef MP || APP-PLUS
      this.isShowAuth = !this.isLogin;
      // #endif
      // #ifdef H5
      if (!Routine.isWeixin()) {
        this.isShowAuth = !this.isLogin;
      } else {
        await this.$wxAuthorize();
        await this.getList();
      }
      // #endif
    }
  },
  onLoad(options) {
    // #ifdef H5
    share.getShareConfig({}, this.$WXMENU);
    // #endif
    global.spid = 0;
    if (options.spreadUid) {
      global.spid = options.spreadUid;
    }
    if (this.isLogin) {
      this.getList();

    }
  },

  methods: {
    personDetail(v) {
      console.log(v);
      uni.navigateTo({
        url: '/pagesWater/reportPersonList/index?shareCode=' + v.shareCode
      });
    },
    pageViewTrack(stayTime) {
      const route = this.$util.getCurrentRoute()
      let params = {
        Um_Key_SourcePage: route.path,
        Um_Key_Duration: stayTime,
      }
      this.$umaTrack.pageViewTrack(params)
    },
    addSearch(item) {
      let params = {
        Um_Key_ButtonName: '重新查询',
        Um_Key_SourcePage: '报告列表',
      }
      this.$umaTrack.pageClickTrack(params)
      uni.navigateTo({
        url: `/pagesWater/taxSearch/index?taxpayerName=${item.taxpayerName}`,
      });
    },
    failPop(v) {
      this.errInfo.title = `${v.taxpayerName}的状态是 ${v.queryStatus}`
      this.goto()
    },
    tabClick1(v) {
      this.current1 = v;
      this.reportList = []
      this.where = {
        pageNum: 1,
        pageSize: 10,
        likeName: this.searchValue ? this.searchValue : "",
        queryStatus: this.numArr[this.current],
        queryType: v,
      };
      this.getList();


      let params = {
        Um_Key_ButtonName: this.tablistTop[v],
        Um_Key_SourcePage: '报告列表',
      }
      this.$umaTrack.pageClickTrack(params)


    },
    tabClick(v) {
      this.current = v;
      this.reportList = [];
      this.where = {
        pageNum: 1,
        pageSize: 10,
        likeName: this.searchValue ? this.searchValue : "",
        queryStatus: this.numArr[v] ? this.numArr[v] : "",
        queryType: this.current1,
      };
      this.getList();
      let params = {
        Um_Key_ButtonName: this.tablist[v],
        Um_Key_SourcePage: '报告列表',
      }
      this.$umaTrack.pageClickTrack(params)
    },
    handleSearch() {
      this.reportList = [];
      this.where = {
        pageNum: 1,
        pageSize: 10,
        likeName: this.searchValue ? this.searchValue : "",
        queryStatus: this.numArr[this.current],
        queryType: this.current1,
      };
      this.getList();
    },
    onLoadFun(e) {
      this.isShowAuth = false;
      this.list.reset();
      this.reportList = [];
      this.getList();
    },
    goto() {
      // #ifdef MP-WEIXIN
      wx.openCustomerServiceChat({
        extInfo: {
          url: 'https://work.weixin.qq.com/kfid/kfc389dffe7ae981936'
        },
        corpId: 'ww1c4069be6ea4025e',
        showMessageCard: true,
        sendMessageTitle: this.errInfo.title,
        success(res) {
          console.log(res);
        },
        fail(err) {
          console.log(err);
        },
      })
      // #endif

      // #ifdef H5
      location.href = "https://work.weixin.qq.com/kfid/kfc389dffe7ae981936";
      // #endif

    },
    closeDialog() {
      this.$refs.popup.close();
    },
    authColse() {
      this.isShowAuth = false;
    },
    getList() {
      getReportListApi(this.where).then((res) => {
        this.total = res.data.total;
        this.reportList = [...this.reportList, ...res.data.list];
      });
    },
    detail(item) {
      if (item.queryStatus == 200) {
        let params = {
          Um_Key_ButtonName: `查看报告详情-${item.shareCode}`,
          Um_Key_SourcePage: '报告列表',
        }
        this.$umaTrack.pageClickTrack(params)
        uni.navigateTo({
          url: `/pagesWater/taxSearch/companyDetail?shareCode=${item.shareCode}`,
        });
      }
    },
  },
  onReachBottom() {
    if (this.total > this.where.pageSize * this.where.pageNum) {
      this.where.pageNum++;
      this.getList();
    } else {
      this.$util.Tips("没有更多数据了");
    }
  },
};
</script>
<style lang="scss">
page {
  background-color: #F4F8FB;
}

// .boxContent {
//   height: 100%;
//   width: 100%;
//   overflow: hidden;
// }

.timeStyle {
  text-align: center;
  padding: 8rpx 10rpx;
  border-radius: 10rpx;
  background: #ffffff;
  min-width: 80rpx;
  display: inline-block;
}

// .tab-main {
//   width: 100%;
//   text-align: center;
//   margin: 0 auto;
//   position: fixed;
//   top: 80rpx;
//   left: 0;
// }

.list-main {
  width: 100%;

  .list-item {
    margin: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;

    .ing-task {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }

    .success-task {
      .success-task-top {
        .task-msg {
          display: flex;
          width: 100%;

          >view {
            color: #555;
            font-size: 26rpx;
            margin-top: 20rpx;

            &:nth-child(1) {
              width: 20%;
            }

            &:nth-child(2) {
              width: 78%;
            }
          }
        }

        .line {
          margin: 30rpx auto;
          width: 650rpx;
          background: #ffffff;
          border-top: 1rpx solid #eeeeee;
        }
      }

      .success-task-bottom {
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .task-msg {
          display: flex;
          align-items: center;

          .task-msg-title {
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
            margin-right: 20rpx;
          }

          .task-msg-content {
            >text {
              &:nth-child(1) {
                font-weight: 600;
                font-size: 26rpx;
                color: #548AEE;
              }

              &:nth-child(2) {
                font-weight: 400;
                font-size: 26rpx;
                color: #999999;
              }
            }
          }
        }


        .task-msg-status {
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
        }

      }
    }

    .ing-fail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }

    .tipStyle {
      color: #999999;
      font-size: 24rpx;
      border-top: 1rpx solid #eeeeee;
      padding-top: 20rpx;
    }
  }
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //padding: 15px;
  width: 590rpx;
  height: 700rpx;
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 999;
  border-radius: 20rpx;

  .popIKnow {
    width: 220rpx;
    height: 64rpx;
    border-radius: 40rpx;
    line-height: 64rpx;
    text-align: center;
    margin: 40rpx auto 0;
    color: #ffffff;
    background-color: #488afd;
  }
}

.resetSearch {
  width: 160rpx;
  height: 50rpx;
  line-height: 50rpx;
  background-color: #488afd;
  color: #fff;
  font-size: 24rpx;
  border-radius: 40rpx;
}
</style>
